<template>
  <div class="search">
    <el-input v-model="search" placeholder="请输入内容">
      <i
        slot="suffix"
        class="el-icon-search el-input__icon searchIcon"
        @click="handleSearch"
      ></i>
    </el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: ''
    }
  },
  methods: {
    handleSearch() {
      const search = this.search.trim()
      if (search) {
        this.$router.push(`/search/${search}`)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  height: 100%;
  width: 100%;
  /deep/ .el-input {
    height: 100%;
    @include flexCenter;
  }
  /deep/ input {
    height: 32px;
    border-radius: 4px;
  }
  /deep/ .el-input__suffix {
    @include flexCenter;
  }
  @include flexCenter;
}
.searchIcon {
  cursor: pointer;
  &:hover {
    color: $--color-primary;
  }
}
</style>
